import React from 'react'
import { Table,Icon,Modal,Popconfirm,Form,Input,Row,Col,DatePicker,Button} from 'antd';
import userApi from '../../../api/user';
const { RangePicker } = DatePicker;

import PanelBox from '../../../components/PanelBox';
import EmployeeForm from '../../Form/Employee';

import '../../../style/antd-theme.less';

export default class TablePage extends React.Component {

  state = {
    data: [],
    pagination: {
    },
    loading: false,
    isOpenCreateUser: false,
    isOpenEditUser: false,
  };
  handleTableChange = (pagination, filters, sorter) => {
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    });
    this.fetch({
      pageSize: pagination.pageSize,
      pageNum: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  }
  fetch = (params = {}) => {
    this.setState({ loading: true });
    userApi.get('/getAllUser', {
      params: {
        ...params,
      },
      responseType: 'json'
    }).then((data) => {
      const _data = data.data.list;
      const pagination = data.data;
      
      this.setState({
        loading: false,
        data: _data,
        pagination,
      });
    });
  }
  componentDidMount = () =>{
    this.fetch({
      pageSize: 15,
      pageNum: 1
    });
  }
  startCreateUser = () =>{
    if(this.resetFields)this.resetFields();
    this.setState({
      isOpenCreateUser: true,
    });
  }
  closeCreateUser = () =>{
    this.setState({
      isOpenCreateUser: false,
    });
  }
  startUpdateUser = () =>{
    this.setState({
      isOpenCreateUser: true,
    });
  }
  closeUpdateUser = () =>{
    this.setState({
      isOpenCreateUser: false,
    });
  }
  handleLogOut = () => {
    const {logout} = this.props
    logout().payload.promise.then(() => {
      this.props.history.replace('/login');
    });
  }
  // 接收子组件传入的数据及其方法
  initChildrenParams = (params) => {
    this.resetFields = params.resetFields;
  }
  

  render() {
    let { sortedInfo, filteredInfo } = this.state;
    sortedInfo = sortedInfo || {};
    let columns = [{
      title: '姓名',
      dataIndex: 'name',
      width: '10%',
    },{
      title: '登录名',
      dataIndex: 'loginName',
      width: '10%',
    },{
      title: '创建时间',
      dataIndex: 'createDate',
      width: '10%',
      sorter: (a, b) => a.createDate > b.createDate,
      sortOrder: sortedInfo.columnKey === 'createDate' && sortedInfo.order,
    }, {
      title: '手机号码',
      dataIndex: 'mobile',
      width: '15%',
    }, {
      title: '邮箱',
      dataIndex: 'email',
    }, {
      title: '用户类型',
      dataIndex: 'type',
      width: '10%',
      render:(text, record, index) =>  {
        switch(record.userType){
          case '1':
            return '系统用户';
          case '2':
            return '平台用户';
          case '3':
            return '代理商用户';
          default:
            return '未知';
        }
      },
    }, {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span>
          <a href="javascript:void(0)" onClick={this.startCreateUser} >编辑</a>
          <span className="ant-divider" />
          <a href="javascript:void(0)">查看详情</a>
          <span className="ant-divider" />
          <Popconfirm title="您是否要删除该用户?" onConfirm={this.handleLogOut} okText="是" cancelText="否">
            <a href="javascript:void(0)">删除</a>
          </Popconfirm>
        </span>
      ),
    }];

    let _this = this;
    class CustomizedForm extends React.Component {
      // 开始搜索
      goSearch = (e) => {
        console.log(this.props.form);
        
        return false;
      }
      render() {
        return <Form onSubmit={this.goSearch}>
          <Row style={{marginBottom:'10px'}} type="flex" justify="start">
              <Col style={{width:'auto',marginRight:'10px'}}>用户:<Input name="userName" placeholder="请输入用户名" style={{width:'150px'}}/></Col>
              <Col style={{width:'auto',marginRight:'10px'}}>登录名:<Input name="loginName" placeholder="请输入登录名" style={{width:'150px'}}/></Col>
              <Col style={{width:'auto',lineHeight:'28px'}}>注册日期:</Col>
              <Col style={{width:'auto',marginRight:'10px'}}><RangePicker renderExtraFooter={() => 'extra footer'} /></Col>
              <Col style={{width:'auto',lineHeight:'28px',marginRight:'10px'}}>
                <Button type="primary" icon="search" htmlType="submit">搜索</Button>
              </Col>
              <Col style={{width:'auto',lineHeight:'28px',marginRight:'10px'}}>
                <Button type="primary" icon="minus">删除所选</Button>
              </Col>
              <Col style={{width:'auto',lineHeight:'28px'}}>
                <Button type="primary" icon="plus" onClick={_this.startCreateUser}>新建雇员</Button>
              </Col>
          </Row>
        </Form>
      }
    }
    const CusForm = Form.create({})(CustomizedForm);
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      }
    };

    return (
      <div>
        <CusForm/>
        <PanelBox>
          <Table columns={columns}  rowKey={record => record.registered}  dataSource={this.state.data}  pagination={this.state.pagination}
            loading={this.state.loading}  onChange={this.handleTableChange}  rowSelection={rowSelection} rowKey={'id'}
          />
        </PanelBox>
        <Modal
          title="创建用户"
          visible={this.state.isOpenCreateUser}
          onOk={this.closeCreateUser}
          onCancel={this.closeCreateUser}
          wrapClassName="vertical-center-modal"
          width="1000px"
          footer={null}
        >
          <EmployeeForm finish={this.closeCreateUser} close={this.closeCreateUser} callbackParent={this.initChildrenParams}/>
        </Modal>
        <Modal
          title="修改用户"
          visible={this.state.isOpenEditUser}
          onOk={this.finishUpdateUser}
          onCancel={this.closeUpdateUser}
          wrapClassName="vertical-center-modal"
          width="1000"
          footer={null}
        >
        </Modal>
      </div>
    );
  }
}